<template>
    <div class="recommend">
        <!-- 酒店筛选结果展示页面 -->
        <div class="recommend-left">

            <div>
                <div v-if="!hotaldata.select_state" class="font_change" style="margin-top: 20px;margin-bottom: 10px;">
                    <h3>酒店</h3>
                    <h3 class="change_h3">推荐</h3>
                </div>
                <div v-else class="font_change">
                    <h3>搜索</h3>
                    <h3 class="change_h3">结果</h3>
                </div>
            </div>

            <!-- 酒店展示列表 -->
            <div ref="target">
                <Recommendlist v-if="targetIsVisible"></Recommendlist>
            </div>
        </div>
        <!-- 当季热推与周末畅游 -->
        <div class="recommend-buttom" style="margin-top: 20px;">
            <div class="font_change">
                <h3>当季</h3>
                <h3 class="change_h3">热推</h3>
            </div>
            <div class="main_contain" style="margin-top: 10px;">
                <div class="containner_left">

                    <div class="containner_left_01">
                        <div>
                            <img v-lazy="`http://101.42.51.171:9000/smart/image/left.png`"
                                style="width: 150px;height: 80px;">
                        </div>
                        <div class="font">当季热卖.跟团游</div>
                    </div>

                    <div class="containner_left_02">
                        <ul>
                            <li class="list">
                                <div class="box">

                                    <div class="box_image">
                                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/travel_001.jpg`"
                                            style="height: 100px;width: 300px;">
                                    </div>

                                    <div class="box_contain">
                                        <div class="box-left">
                                            <div class="left_01">洛阳+郑州三日两晚跟团游</div>
                                            <div class="left_02" style="font-size: 14px;font-weight: 200;">4.9分 |
                                                258796人出游</div>

                                        </div>
                                        <div class="box-right">
                                            ￥1291起
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li class="list">
                                <div class="box">

                                    <div class="box_image">
                                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/travel_002.jpg`"
                                            style="height: 100px;width: 300px;">
                                    </div>

                                    <div class="box_contain">
                                        <div class="box-left">
                                            <div class="left_01">江苏天目湖两日一晚跟团游</div>
                                            <div class="left_02" style="font-size: 14px;font-weight: 200;">4.7分 |
                                                156796人出游</div>

                                        </div>
                                        <div class="box-right" style="padding-left: 45px;">
                                            ￥1101起
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="containner_right" style="margin-left: 50px;">

                    <div class="containner_left_01">
                        <div><img v-lazy:="`http://101.42.51.171:9000/smart/image/right.png`"
                                style="width: 150px;height: 80px;"></div>
                        <div class="font">周末畅游.特价机票</div>
                    </div>

                    <div class="containner_left_02">
                        <ul>
                            <li class="list">
                                <div class="box">

                                    <div class="box_image">
                                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/travel_003.jpg`"
                                            style="height: 100px;width: 300px;">
                                    </div>

                                    <div class="box_contain">
                                        <div class="box-left">
                                            <div class="left_01">北京⇋上海</div>
                                            <div>
                                                <button
                                                    style="color: #00b87a;border:1px solid #00b87a;background-color: white;font-size: 14px;font-weight: 200;">途路精选</button>
                                            </div>
                                            <div class="left_02" style="font-size: 14px;font-weight: 200;">5.11 去 5.12 回
                                            </div>

                                        </div>
                                        <div class="box-right" style="margin-left: 80px;">
                                            ￥291起
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li class="list">
                                <div class="box">

                                    <div class="box_image">
                                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/travel_004.jpg`"
                                            style="height: 100px;width: 300px;">
                                    </div>

                                    <div class="box_contain">
                                        <div class="box-left">
                                            <div class="left_01">北京⇋南京</div>
                                            <div>
                                                <button
                                                    style="color: #00b87a;border:1px solid #00b87a;background-color: white;font-size: 14px;font-weight: 200;">途路精选</button>
                                            </div>
                                            <div class="left_02" style="font-size: 14px;font-weight: 200;">5.17 去 5.18 回
                                            </div>

                                        </div>
                                        <div class="box-right" style="margin-left: 80px;">
                                            ￥331起
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门航线推荐 -->
        <!-- <div style="margin: 10px;">百度地图</div>
        <baidu-map class="map" :center="{lng:116.404,lat:39.915}" :zoom="3"></baidu-map> -->

        <!-- 企业商旅 -->
        <div style="display: block;margin-top: 60px;">
            <div style="margin: 10px;">
                企业商旅
            </div>
            <div style="display: flex;">
                <!-- 第一个 -->
                <div
                    style="border-radius: 15px; width: 380px;height: 150px; margin-left: 16px;display: flex;background: linear-gradient(-180deg, #fafcff 0%, #f2f8fe 100%);">
                    <div>
                        <img src="http://101.42.51.171:9000/smart/image/shanglv_01.png" alt=""
                            style="margin: 50px 16px;width: 44px;height: 44px;;">
                    </div>
                    <div
                        style="display:block;justify-content: flex-start;align-items: flex-start;padding-top: 40px;padding-bottom: 20px;padding-left: 30px;">
                        <div style="color: #333333; font-size: 16px;font-weight: 500;line-height: 20px;">一站式企业差旅服务</div>
                        <div
                            style="margin-top: 12px;color: #666666;font-size: 14px;font-weight: normal;line-height: 20px; max-width: 100%;">
                            海量差旅产品，全流程服务，智能管控，助力企业成本节省高达30%！</div>
                    </div>
                </div>
                <!-- 第二个 -->
                <div
                    style="border-radius: 15px;width: 380px;height: 150px; margin-left: 16px;display: flex;background: #fff8f2;">
                    <div>
                        <img src="http://101.42.51.171:9000/smart/image/shanglv_02.png" alt=""
                            style="margin: 50px 16px;width: 44px;height: 44px;;">
                    </div>
                    <div
                        style="display:block;justify-content: flex-start;align-items: flex-start;padding-top: 40px;padding-bottom: 20px;padding-left: 30px;">
                        <div style="color: #333333; font-size: 16px;font-weight: 500;line-height: 20px;">公对公结算</div>
                        <div
                            style="margin-top: 12px;color: #666666;font-size: 14px;font-weight: normal;line-height: 20px; max-width: 100%;">
                            15分钟极速开通公司账户、30+20天超长账期，自助对账，统一开票、配送！%！</div>
                    </div>
                </div>
                <!-- 第三个 -->
                <div
                    style="border-radius: 15px;width: 380px;height: 150px; margin-left: 16px;display: flex;background: #f2fbf8;">
                    <div>
                        <img src="http://101.42.51.171:9000/smart/image/shanglv_01.png" alt=""
                            style="margin: 50px 16px;width: 44px;height: 44px;;">
                    </div>
                    <div
                        style="display:block;justify-content: flex-start;align-items: flex-start;padding-top: 40px;padding-bottom: 20px;padding-left: 30px;">
                        <div style="color: #333333; font-size: 16px;font-weight: 500;line-height: 20px;">企业方案量身定制</div>
                        <div
                            style="margin-top: 12px;color: #666666;font-size: 14px;font-weight: normal;line-height: 20px; max-width: 100%;">
                            强大的产品技术&服务解决方案 ，支持企业规模在500人以上中大型企业定制%！</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 途路旅行保障 -->
        <div style="display: block;margin-top: 60px;">
            <div style="margin: 10px;">途路旅行保障</div>
            <div style="display: block;;margin-top: 30px;margin-left: 30px;">
                <div style="display: flex;">

                    <div style="display: flex;width: 260px;height: 80px;margin-left: 20px;">
                        <div>
                            <img src="http://101.42.51.171:9000/smart/image/baozhang_01.png" alt=""
                                style="margin-right: 10px;width: 44px;height: 44px;">
                        </div>
                        <div style="display: block;">
                            <div style="font-size: 16px;font-weight: 500;line-height: 20px;">酒店 · 放心住</div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                200多个国家121万家酒店
                            </div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                确认订单后不涨价
                            </div>
                        </div>
                    </div>

                    <div style="display: flex;width: 260px;height: 80px;margin-left: 20px;">
                        <div>
                            <img src="http://101.42.51.171:9000/smart/image/baozhang_02.png" alt=""
                                style="margin-right: 10px;width: 44px;height: 44px;">
                        </div>
                        <div style="display: block;">
                            <div style="font-size: 16px;font-weight: 500;line-height: 20px;">机票 · 放心飞</div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                近200万条全球航线选择
                            </div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                一站式售后服务体验
                            </div>
                        </div>
                    </div>

                    <div style="display: flex;width: 260px;height: 80px;margin-left: 20px;">
                        <div>
                            <img src="http://101.42.51.171:9000/smart/image/baozhang_03.png" alt=""
                                style="margin-right: 10px;width: 44px;height: 44px;">
                        </div>
                        <div style="display: block;">
                            <div style="font-size: 16px;font-weight: 500;line-height: 20px;">火车票 · 放心行</div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                价格透明，退票改签不收取
                            </div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                额外费用，保障客人出行
                            </div>
                        </div>
                    </div>

                    <div style="display: flex;width: 260px;height: 80px;margin-left: 20px;">
                        <div>
                            <img src="http://101.42.51.171:9000/smart/image/baozhang_04.png" alt=""
                                style="margin-right: 10px;width: 44px;height: 44px;">
                        </div>
                        <div style="display: block;">
                            <div style="font-size: 16px;font-weight: 500;line-height: 20px;">旅游 · 放心玩</div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                开放数万条旅游产品选择
                            </div>
                            <div
                                style="color: #999999;font-size: 14px;font-weight: normal;line-height: 22px;margin-top: 4px;">
                                7*24小时应急救援体系
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from "vue";
import { nextTick } from 'vue'
//pinia本地化存储用户信息
import { Hotaldata } from "../store/Hotaldata.js";
const hotaldata = Hotaldata();
// 异步加载组件
import { useIntersectionObserver } from "@vueuse/core";
const Recommendlist = defineAsyncComponent(() =>
    import('../components/Recommend-list.vue')
)
const target = ref(null);
const targetIsVisible = ref(false)
const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
        if (isIntersecting) {
            targetIsVisible.value = isIntersecting
        }
    }
)
//百度地图

</script>

<style scoped lang="scss">
//百度地图css样式
// .map {
//     width: 755px;
//     height: 500px;
// }

.main_contain {
    display: flex;
    width: 780px;
}

.containner_left {
    height: 500px;
    width: 350px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 15px;
    background: linear-gradient(-153.43deg, #f4fafd 0%, #e2f2fb 100%);
}

.containner_right {
    height: 500px;
    width: 350px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 15px;
    background: linear-gradient(26.57deg, #e6ecfc 0%, #f4f6fd 100%);
}

.containner_left_01 {
    display: flex;
    justify-content: center;
    height: 80px;
    z-index: auto;

    .font {
        padding-top: 30px;
        padding-left: 5px;
        font-size: 19px;
        font-weight: 700;
    }
}

.containner_left_02 {
    background-color: white;
    margin: 5px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    border-radius: 15px;

    .list {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
}

.box {
    display: block
}

.box_contain {
    display: flex;

    .box-left {
        display: block;
        font-size: 15px;
        font-weight: 700;
    }

    .box-right {
        font-size: 20px;
        font-weight: 500;
        color: #0086f6;
        padding-left: 50px;
    }
}


.font_change {
    display: flex;
}

.recommend {
    width: 1288px;
    display: block;
    gap: 0px 20px;
    padding: 10px, 0;
}

.recommend-left {
    width: 780px;
}

.recommend-right {
    width: 450px;
}

h3 {
    font-size: 23px;
    font-weight: 400;
}

.change_h3 {
    font-size: 23px;
    font-weight: 400;
    color: #FF7700;
}
</style>